<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>{{ name }}的Vue</h2>
      <h2>今年{{ age }}岁了</h2>
    </div>
  </body>
</html>
<script>
  const vm = new Vue({
    el: '#app',
    /*
      data 可以是一个对象，是Vue 实例的数据对象
      data的数据会在实例对象vm上作为属性存放起来
      data也可以是一个函数，返回一个对象，对象中存放当前的实例需要的数据，建议是一个函数
    */
    // data: {
    //   name: '王伟伦',
    //   age: 20,
    // },
    data: {},
    /*
       为什么组件内部的data要书写成一个函数
       当一个组件可能被用来创建多个实例（组件很有可能被复用）
       如果data仍然是一个单纯的对象，则所有的实例将会共享同一个数据对象，则数据就会相互影响
       通过通过data函数，每次创建一个新的实例后，我们就能够调用data函数，从而返回初始数据的一个全新的副本数据对象
    */
    data() {
      return {
        name: '王伟伦',
        age: 20,
      };
    },
  });

  // 为什么data不能写成函数？
  //   // 假设有一个page组件的数据，组件要被A和B复用
  //   const page = {
  //     currentPage: 0,
  //     total: 0,
  //   };

  //   // A使用了page组件，A就拿到了page的数据
  //   A.page;
  //   A.currentPage = 1;
  //   A.total = 10;

  //   // B使用了page组件，B就拿到了page的数据
  //   B.page;
  //   B.currentPage = 2;
  //   B.total = 5;

  //   // 因为对象的赋值是地址的赋值，所以A和B的page是用的同一个对象，任意修改其中的一个都会影响其他的
  //   console.log(A);
  //   console.log(B);
  //   A.currentPage = 3;

  //为什么data写成函数?
  // 初始page数据，把数据定义成一个函数
  const page = function () {
    return {
      currentPage: 0,
      total: 0,
    };
  };

  // A使用了page组件，A就拿到了page的数据
  A = page();
  A.currentPage = 1;
  A.total = 10;

  // B使用了page组件，B就拿到了page的数据
  B = page();
  B.currentPage = 2;
  B.total = 5;

  console.log(A === B);
</script>
